<template>
  <div class="container">
    <div style="display:flex;">
      <span>这里用来查询笑话</span>
      <el-button type="primary" @click="checkJoke">切换笑话源为2</el-button>
    </div>
    <div v-if="jokeStatus == 1">
      <el-table
        :data="listInfo"
        style="width: 100%">
        <el-table-column
          prop="6131cef99d9f1b77b4a57fc7"
          label="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope">
            <div v-if="scope.row.type == 1">
              {{scope.row.text}}
            </div>
            <div style="width:500px;height:500px" v-if="scope.row.type == 2 || scope.row.type == 3">
              <img :src="scope.row.img" style="width:100%;height:100%" mode="" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      v-if="jokeStatus == 1"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 30, 50]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <div v-if="jokeStatus == 2">
      <el-table
        :data="listInfo2"
        style="width: 100%">
        <el-table-column
          prop="sid"
          label="id"
          width="90">
        </el-table-column>
        <el-table-column
          prop="top_comments_name"
          label="作者名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="text"
          label="标题"
          width="200">
        </el-table-column>
        <el-table-column
          prop="top_comments_content"
          label="内容"
          width="200">
        </el-table-column>
        <el-table-column label="图片/视频">
          <template slot-scope="scope">
            <div v-if="scope.row.type != 'video'" style="width:500px;height:500px">
              <img :src="scope.row.images" style="width:100%;height:100%" mode="" />
            </div>
            <div v-if="scope.row.type == 'video'" style="width:500px;height:500px">
              <video :src="scope.row.video" type="video/mp4" controls autoplay width="500px" height="380px" >
                抱歉，你的浏览器不支持video标签。。
              </video>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getJoke,getJoke2 } from '@/common/common'

export default {
  data() {
    return {
      page:1,
      rows:10,
      total:0,
      listInfo:[],
      listInfo2:[],
      jokeStatus:2,
    }
  },
  mounted() {
    this.search2();
  },
  methods:{
    checkJoke(){
      if(this.jokeStatus == 1){
        this.jokeStatus = 2;
        this.search2();
      }else if(this.jokeStatus == 2){
        this.jokeStatus = 1;
        this.search();
      }
    },
    search2(){
      let params = {};
      getJoke2(params).then(res=>{
        if(res.status == 200){
          let data = JSON.parse(res.data.body);
          console.log(data);
          this.listInfo2 = data.result;
        }
      });
    },
    search(){
      if(this.cityVal == ''){
        this.$message.error("请选择正确的城市");
        return;
      }
      let params = {
        page:this.page,
        maxResult:this.rows
      }
      getJoke(params).then((res) => {
        let data = JSON.parse(res.data.body);
        this.total = data.showapi_res_body.allNum;
        this.listInfo = data.showapi_res_body.contentlist;
      })
      .catch((err) => {
        console.log(err);
      })
    },
    handleSizeChange(val) {
      this.rows = val;
      this.search();
      this.backTop();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.search();
      this.backTop();
    },
    backTop () {
      document.body.scrollTop = 0;
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  padding: 1%;
  margin: 0 auto;
}
</style>
